<template>
	<view class="integrateCoin">
		<u-navbar title="充值金币" title-size="36" title-color="#333333" back-icon-size="40"></u-navbar>
		<view class="icon_section">
			<u-row gutter="26">
				<u-col span="3" v-for="(item, index) in coinList" :key="index" @click="onSelectCoin(item)">
					<view class="coin-section" :class="[item.status ? 'active' : null]">
						<view class="grid-num">{{ item.goldCoinCount }}</view>
						<view class="grid-price">{{ item.rechargeAmountStr }}</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="coin-btn">
			<button type="default" :disabled="btnDisable" class="recharge_coin" @click="recharge">充值金币</button>
		</view>
		
		<view class="cion_tips">
			<view class="tips_title">
				温馨提示：
			</view>
			<view class="tips_content">
				1、充值金币后，虚拟积分仅限当前账号使用，不可转让交易；<br />
				2、虚拟积分仅限当前产品内使用，不支持提现和退款，请注意；<br />
				3、充值金币后，若金币数量未更新，请关闭程序后再次进入，
				进行数据刷新，高峰期数据会有延迟；<br />
				4、关于充值金币，如有任何疑问或投诉，请联系客服微信号：{{ config.PARAM_WECHAT }}；
			</view>
		</view>
	</view>
</template>

<script>
const coinList = [{
	goldCoinCount: 100,
	rechargeAmountStr: '¥9.80',
	rechargeAmount: 9.8,
	status: false,
}, {
	goldCoinCount: 200,
	rechargeAmountStr: '¥19.00',
	rechargeAmount: 19,
	status: false,
}, {
	goldCoinCount: 300,
	rechargeAmountStr: '¥27.60',
	rechargeAmount: 27.6,
	status: false,
}, {
	goldCoinCount: 500,
	rechargeAmountStr: '¥45.00',
	rechargeAmount: 45,
	status: false,
}, {
	goldCoinCount: 1000,
	rechargeAmountStr: '¥87.00',
	rechargeAmount: 87,
	status: false,
}, {
	goldCoinCount: 2000,
	rechargeAmountStr: '¥170.00',
	rechargeAmount: 170,
	status: false,
}, {
	goldCoinCount: 3000,
	rechargeAmountStr: '¥246.00',
	rechargeAmount: 246,
	status: false,
}, {
	goldCoinCount: 5000,
	rechargeAmountStr: '¥400.00',
	rechargeAmount: 400,
	status: false,
}]
import { mapState } from 'vuex'
export default {
	data() {
		return {
			coinList,
			selectObj: {}, // 需要购买的
		}
	},
	computed: {
		...mapState(['config']),
		btnDisable() {
			if(this.selectObj.rechargeAmount) {
				return false
			} else {
				return true
			}
		}
	},
	methods: {
		onSelectCoin(item) {
			this.coinList.forEach(item => {
				item.status = false
			})
			item.status = true
			this.selectObj = item
		},
		recharge() {
			let _this = this
			let selectObj = this.selectObj
			if(!selectObj.goldCoinCount) {
				return
			}
			// selectObj.rechargeAmount || 
			this.$u.post('/paopao/mini/user/openPayCharge', {
				rechargeAmount: 0.01,
				goldCoinCount: selectObj.goldCoinCount || 1
			}).then(function (data) {
				// console.log(data);
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: data.timestamp,
					nonceStr: data.noncestr,
					package: data.packageValue,
					signType: data.signType,
					paySign: data.paySign,
					success: function success() {
						_this.$u.toast('支付成功');
						
					},
					fail: function fail(error) {
					    console.log(error);
					    _this.$u.toast('支付失败，请重新支付');
					}
				  });
			});
		}
	}
}
</script>

<style lang="less" scoped>
@import url("../../common/css/var.less");	
.icon_section {
	padding: 32rpx 24rpx;
}
.coin-section {
	background: url('../../static/user/recharge_bg.png') no-repeat center #FFFAD3;
	background-size: contain;
	margin-bottom: 40rpx;
	width: 152rpx;
	height: 152rpx;
	border: 4rpx solid #FFFAD3;
	opacity: 1;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	&.active {
		border: 4rpx solid @orangeColor;
	}
	.grid-num {
		font-size: 56rpx;
		color: @orangeColor;
	}
	.grid-price {
		font-size: 24rpx;
		color: @sText;
	}
}
.coin-btn {
	width: 100%;
	padding: 24rpx 32rpx 0;
	.recharge_coin {
		line-height: 96rpx;
		background: #FF7B02 !important;
		box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.06);
		border-radius: 48rpx;
		color: #FFFFFF;
		font-size: 36rpx;
		&[disabled] {
			background: #CCCCCC !important;
			color: #FCFCFC;
		}
	}
}
.cion_tips {
	padding: 80rpx 32rpx 32rpx;
	font-size: 24rpx;
	color: @tText;
	line-height: 40rpx;
	.tips_title {
		padding-bottom: 24rpx;
		color: @mText;
	}
}
</style>
